<template>
  <div class="modal">
    <div class="modal-overlay" @click="handleClose"></div>
    <div class="modal-content">
      <div class="modal-header">
        <h2>游戏记录</h2>
        <button class="close-btn" @click="handleClose">×</button>
      </div>

      <div class="modal-body">
        <div v-if="!authStore.isAuthenticated" class="not-logged-in">
          <p>请先登录查看游戏记录</p>
        </div>

        <div v-else>
          <div v-if="cloudScoresStore.bestScore" class="best-score-section">
            <h3>个人最佳</h3>
            <div class="best-score-card">
              <div class="score-item">
                <span class="label">分数</span>
                <span class="value">{{ cloudScoresStore.bestScore.score }}</span>
              </div>
              <div class="score-item">
                <span class="label">WPM</span>
                <span class="value">{{ cloudScoresStore.bestScore.wpm }}</span>
              </div>
              <div class="score-item">
                <span class="label">准确率</span>
                <span class="value">{{ cloudScoresStore.bestScore.accuracy }}%</span>
              </div>
              <div class="score-item">
                <span class="label">最大连击</span>
                <span class="value">{{ cloudScoresStore.bestScore.combo_max }}</span>
              </div>
            </div>
          </div>

          <div class="scores-section">
            <h3>历史记录</h3>
            
            <div v-if="cloudScoresStore.isLoading" class="loading">加载中...</div>
            <div v-else-if="cloudScoresStore.error" class="error-message">{{ cloudScoresStore.error }}</div>
            <div v-else-if="cloudScoresStore.scores.length === 0" class="no-data">暂无游戏记录</div>

            <div v-else class="scores-list">
              <div v-for="score in cloudScoresStore.scores" :key="score.id" class="score-card">
                <div class="score-main">
                  <div class="score-value">{{ score.score }}</div>
                  <div class="score-date">{{ formatDate(score.created_at) }}</div>
                </div>
                
                <div class="score-details">
                  <div class="detail-item">
                    <span class="label">WPM</span>
                    <span class="value">{{ score.wpm }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="label">准确率</span>
                    <span class="value">{{ score.accuracy }}%</span>
                  </div>
                  <div class="detail-item">
                    <span class="label">连击</span>
                    <span class="value">{{ score.combo_max }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="label">时长</span>
                    <span class="value">{{ score.duration }}s</span>
                  </div>
                </div>

                <button class="delete-btn" @click="handleDelete(score.id)">删除</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useAuthStore } from '@/stores/auth';
import { useCloudScoresStore } from '@/stores/cloud-scores';

const emit = defineEmits<{ close: [] }>();

const authStore = useAuthStore();
const cloudScoresStore = useCloudScoresStore();

// const totalPages = computed(() => Math.ceil(cloudScoresStore.totalCount / cloudScoresStore.pageSize));
// const currentPage = computed(() => cloudScoresStore.currentPage);

onMounted(() => {
  cloudScoresStore.fetchScores();
  cloudScoresStore.fetchBestScore();
});

function formatDate(dateString: string): string {
  const date = new Date(dateString);
  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
}

// async function changePage(page: number) {
//   await cloudScoresStore.fetchScores(page);
// }

async function handleDelete(id: number) {
  if (confirm('确定要删除这条记录吗？')) {
    try {
      await cloudScoresStore.deleteScore(id);
    } catch (e) {
      // 错误已在store中处理
    }
  }
}

function handleClose() {
  emit('close');
}
</script>

<style lang="scss" scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;

  h2 {
    margin: 0;
    font-size: 1.5rem;
  }

  .close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 30px;
    height: 30px;

    &:hover {
      color: #333;
    }
  }
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.not-logged-in {
  text-align: center;
  padding: 40px;
  color: #666;
}

.best-score-section {
  margin-bottom: 30px;

  h3 {
    margin: 0 0 15px 0;
    color: #333;
  }
}

.best-score-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 12px;
}

.score-item {
  text-align: center;

  .label {
    display: block;
    font-size: 0.85rem;
    opacity: 0.9;
    margin-bottom: 5px;
  }

  .value {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
  }
}

.scores-section {
  h3 {
    margin: 0 0 15px 0;
    color: #333;
  }
}

.loading, .no-data, .error-message {
  text-align: center;
  padding: 40px;
  color: #666;
}

.scores-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.score-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  position: relative;

  &:hover {
    background: #e9ecef;
  }
}

.score-main {
  min-width: 100px;

  .score-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #4A90E2;
  }

  .score-date {
    font-size: 0.85rem;
    color: #666;
  }
}

.score-details {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.detail-item {
  text-align: center;

  .label {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 3px;
  }

  .value {
    display: block;
    font-weight: bold;
    color: #333;
  }
}

.delete-btn {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: opacity 0.2s;

  &:hover {
    opacity: 0.8;
  }
}
</style>
